<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        //原生JS版实现
        window.onload=function()
        {
            
            var btn1=document.getElementById("btn1");
            var input=document.getElementById("username");
            btn1.onclick=function()
            {
                console.log(input.value);
            };
        };
    </script>
    
    <!--使用jQuery本地库实现-->
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <!--使用jQuery远程库实现-->
    <!--<script src="https://code.jquery.com/jquery-3.6.0.js"></script>-->
    <script type="text/javascript">
        console.log(jQuery);
        console.log($);
        console.log(window);
        /*
        根据以上的三条控制台输出代码，可以得出以下结论：
        在导入了jQuery的JS文件后，存在以下关系
        jQuery属性=$属性
        jQuery属性和$属性都是window的属性
        即，jQuery=$
         window.jQuery=window.$
         */
        console.log(window.$ === window.jQuery);
        console.log(jQuery === $);
        //以上两条控制台输出皆为true，可以证实jQuery=$

        //绑定文档加载完成的监听
        //使用jQuery核心函数$()/jQuery()
        $(function(){
            var $btn2=$("#btn2");
            console.log($btn2);
            //注意：btn2的原型链中没有oncli为null，只有click()办法
            var $input=$("#username");
            console.log($input);
            //注意：input的属性和原型链中没有value属性，只有val()办
            $btn2.click(function()
            {
                var number=$input.val();
                console.log(number);
            })
        })
        
    </script>
</head>
<body>
    <!--
        需求：点击“确定”按钮，提示输入的值
    -->
    用户名：<input type="text" id="username">
    <button id="btn1">确定（原生版）</button>
    <button id="btn2">确定（jQuery版）</button>
</body>
</html>